<template>
  <div class="search">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <span>商品搜索</span>
    </div>
    <!-- 搜索框部分 -->
    <div class="content">
      <p>商品名 <i class="iconfont icon-sousuo"></i></p>
      <input type="search" v-model="goods" placeholder="请输入商品关键词" />
      <p class="zi" @click="searchGoods">搜索</p>
    </div>
    <!-- 热搜 -->
    <div class="hot" v-show="yincang">
      <p>全网热搜</p>
      <div class="hota">
        <span
          class="sctive"
          v-for="(item, index) in Hotlist"
          :key="index"
          @click="hotClick(item)"
        >
          {{ item }}</span
        >
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="list-content">
      <ul>
        <li
          v-for="item in goodslist"
          :key="item.id"
          @click="$router.push(`/mydetail/${goodsId}`)"
        >
          <img :src="item.goodsLogo" alt="" />
          <p class="sold">
            已售<span>{{ item.goodsBuyNum }}</span
            >件
          </p>
          <div class="message">
            <p>{{ item.goodsName }}</p>
            <span class="del"
              ><del>{{ item.goodsOldPrice }}</del></span
            >
            <span class="now">￥{{ item.goodsPrice }}</span>
            <span class="collect">
              <img src="../../assets/images/collect.png" alt="" />
              <span>{{ item.goodsFav }}</span>
            </span>
          </div>
        </li>
      </ul>
      <!-- 返回到顶部 -->
      <Back-Top v-show="isShowBackTop" />
    </div>
  </div>
</template>

<script>
import BackTop from "@/components/back/BackTop.vue";
import { MGoodsApi, SearchHotApi } from "@/request/api";
export default {
  data() {
    return {
      // 输入框绑定的数据用于搜索
      goods: "",
      // 全网热搜
      Hotlist: [],
      // 商品列表
      goodslist: [],
      // 控制全网热搜显示和隐藏
      yincang: true,
      // 是否显示 回到顶部按钮
      isShowBackTop: false,
    };
  },
  components: {
    BackTop,
  },
  created() {
    // 全网热搜
    SearchHotApi().then((res) => {
      if (res.data.code === 200) {
        this.Hotlist = res.data.data;
        // console.log(this.Hotlist);
      }
    });
  },
  methods: {
    // 输入内容点击搜索
    searchGoods() {
      MGoodsApi(this.goods).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.goodslist = res.data.data;
          // console.log(this.goodslist);
          this.yincang = false;
          this.isShowBackTop = true;
        }
      });
    },
    //点击热搜进行的搜索
    hotClick(item) {
      this.goods = item;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search {
  height: 6vh;
  line-height: 6vh;
  background-color: #f7f8fa;
  .header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    i {
      float: left;
      margin-left: 10px;
    }
  }
  .content {
    display: flex;

    justify-content: space-evenly;
    background-color: #f7f8fa;
    border-radius: 20px;
    p {
      text-align: center;
    }
    .zi {
      padding-left: 10px;
      border-left: 1px solid #ccc;
    }
    input {
      text-align: center;
      border: none;
      outline: none;
      background-color: #f7f8fa;
    }
    i {
      margin-left: 5px;
    }
  }
  .hot {
    margin-top: 20px;
    p {
      position: relative;
      margin-left: 60px;
      &::after {
        content: "";
        width: 230px;
        height: 1px;
        position: absolute;
        display: inline-block;
        top: 20px;
        right: 0px;
        background-color: #f7f8fa;
      }
      &::before {
        content: "";
        width: 50px;
        height: 1px;
        position: absolute;
        display: inline-block;
        top: 20px;
        left: -60px;
        background-color: #f7f8fa;
      }
    }
    .hota {
      margin: 0 40px;
      display: flex;
      flex-wrap: wrap;
      span {
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        border: 1px solid #c4c4c4;
        padding: 2px 10px;
        border-radius: 15px;
        color: #a1a1a1;
        margin: 10px 5px;
        &:active {
          border: 1px solid blue;
          color: blue;
        }
      }
    }
  }
}
.list-content {
  margin-top: 10px;
  margin-left: 1vw;
  background-color: #f7f8fa;
  margin-bottom: 14vw;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 48%;
      border-radius: 10px;

      overflow: hidden;
      background-color: #fff;
      margin: 5px 0 5px 5px;
      position: relative;
      img {
        width: 100%;
      }
      .sold {
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .message {
        margin-left: 5px;
        font-size: 14px;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 3px;
        }
        .del {
          color: #b4b4b4;
          font-size: 12px;
        }
        .now {
          color: red;
          font-weight: bolder;
          margin-left: 10px;
        }
        .collect {
          float: right;
          font-size: 12px;
          margin-right: 10px;
          img {
            width: 14px;
          }
        }
        margin-bottom: 10px;
        line-height: 20px;
      }
    }
  }
}
</style>